<template>
	<view class="app">
		<view><u-toast ref="uToast" /></view>
		<view class="tips">
			<view style="color: #cccccc; font-size: 30rpx; ">设置后，学生平板只允许连接白名单范围内的APP;请谨慎设置一旦错误将可能导致平板无法连网。</view>
		</view>
		
		<view  class="body">
			<view style="font-weight: bold; font-size: 30rpx; padding-top: 20rpx; padding-bottom: 20rpx;">{{settingText}}</view>
			<view class="noData"  v-if="wifiList.length==0">
				<view>
					<u-image width="120rpx" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noData.png" mode="widthFix"></u-image>
					<view>暂无数据</view>
				</view>
			</view>
			
			<view v-for="(item, index) in wifiList" :key="index" >
				<view class="appInfo">
					<view class="sortText"><text style="color: gray; font-size: 50rpx;">{{index+1}}</text></view>
					<view>
						<view>{{item.name}}</view>
						<view>设置人员:{{setName}}</view>
						<view>设置时间:{{setTime}}</view>
					</view>
					<view>
						<u-image width="50rpx" height="50rpx"  mode="widthFix" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/del.png" @click="delWifiListControl(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
		
		<view style="display: flex; justify-content: center; margin: 10rpx; margin-top: 30rpx;">
			<u-button shape="square" type="primary" @click="goToUrl">添加WIFI白名单</u-button>
		</view>
		
	</view>
		
</template>

<script>
import { delWifiList, getWifiList } from '../../../api/systemControl';
import {delWhiteApp, getWhiteApp } from '../../../api/userHome'
	export default {
		data() {
			return {
				settingText: '当前WIFI(路由器)白名单',
				src: '',
				wifiList: [],
				setTime: '',
				setName: '',
				wifi_id: 0,
				customStyle: {
					margin: '0rpx',
					padding: '0rpx',
					width: '100rpx',
					height: '60rpx',
				},
			}
		},
		onLoad() {
			// this.refreshListAndPage();
			this.queryWifiList()
			
		},
		
		methods: {
			queryWifiList() {
				getWifiList({
					id: uni.getStorageSync('snId'),
				}).then(res => {
					this.wifiList = res.data['wifiList']
					this.setTime = res.data.setTime
					this.setName = res.data.setName
					this.wifi_id = res.data['id']
					
				}).catch(err => {
					this.wifiList = []
					this.setTime = ''
					this.setName = ''
					this.wifi_id = 0
				})
			},
			goToUrl() {
				uni.navigateTo({
					url: '/pages_subpackage/androidControl/addWhiteWifi/index'
				})
			},
		
			delWifiListControl(item) {
				var index = this.wifiList.indexOf(item)
				if (index !== -1) {
					this.wifiList.splice(index, 1)
				}
				console.log(this.wifiList)
				let content = this.wifiList.map(item => item.name).toString()
				delWifiList({
					wifi_id: this.wifi_id,
					userId: uni.getStorageSync('snId'),
					id: uni.getStorageSync('snId'),
					last_ip: uni.getStorageSync('Ip'),
					content: content
				}).then(res => {
					this.queryWifiList()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
				})
			},
			
		}
	}
	
</script>

<style lang="scss">
	.app {
		.tips {
			    background-color: #4d94ff;
			    border-radius: 35rpx;
			    height: 100rpx;
			    padding-left: 60rpx;
			    padding-top: 13rpx;
				margin-bottom: 20rpx;
		}
		
		.body {
			background-color: #ffffff;
			border-style: solid;
			border-color: #ffffff;
			border-radius: 20rpx;
		}
		.noData {
			display: flex;
			justify-content: center;
		}
		.appInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
		}
		.sortText {
			    width: 50px;
			    height: 50px;
			    background-color: rgb(204, 204, 204);
			    border-radius: 25px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
		}
	}
</style>